<template>
  <el-dialog class="questionEdit" :visible.sync="dialogFormVisible" fullscreen>
    <div slot="title" class="title">
      {{ mode === 'add' ? '新增' : '修改' }}题库
    </div>
    <el-form
      ref="questionFormRef"
      :rules="rules"
      :model="questionForm"
      label-width="120px"
      label-position="left"
      class="form"
    >
      <el-form-item label="学科" prop="subject">
        <el-select
          class="select"
          v-model="questionForm.subject"
          placeholder="请选择学科"
        >
          <el-option
            v-for="item in subjectList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="阶段" prop="step">
        <el-select
          class="select"
          v-model="questionForm.step"
          placeholder="请选择阶段"
        >
          <el-option
            v-for="(value, name) in stepObj"
            :key="name"
            :label="value"
            :value="+name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="企业" prop="enterprise">
        <el-select
          class="select"
          v-model="questionForm.enterprise"
          placeholder="请选择企业"
        >
          <el-option
            v-for="item in enterpriseList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-cascader
          v-model="questionForm.city"
          :options="options"
          :props="{ value: 'label' }"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="题型" prop="type">
        <el-radio-group v-model="questionForm.type">
          <el-radio
            v-for="(value, name) in typeObj"
            :key="name"
            :label="+name"
            @change="questonTypeChange"
            >{{ value }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-form-item label="难度" prop="difficulty">
        <el-radio-group v-model="questionForm.difficulty">
          <el-radio
            v-for="(value, name) in difficultyObj"
            :key="name"
            :label="+name"
            >{{ value }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <hr />
      <el-form-item label="试题标题" class="quillEditor" prop="title">
        <quill-editor
          v-model="questionForm.title"
          ref="myQuillEditor"
          @change="editorChange('title')"
          :options="{ placeholder: '请输入试题标题' }"
        >
        </quill-editor>
      </el-form-item>
      <el-form-item
        :label="typeObj[questionForm.type]"
        :prop="answerType[questionForm.type]"
      >
        <question-type
          :questionForm="questionForm"
          @questonTypeChange="questonTypeChange"
        ></question-type>
      </el-form-item>
      <hr class="hrMargin" />
      <!-- 解析视频 -->
      <el-form-item label="解析视频">
        <upload-file type="video" v-model="questionForm.video"></upload-file>
      </el-form-item>
      <!-- 答案解析 -->
      <el-form-item label="答案解析" class="quillEditor" prop="answer_analyze">
        <quill-editor
          v-model="questionForm.answer_analyze"
          ref="myQuillEditor"
          @change="editorChange('answer_analyze')"
          :options="{ placeholder: '请输入答案解析' }"
        >
        </quill-editor>
      </el-form-item>
      <hr class="hrMargin" />
      <el-form-item label="试题备注" prop="remark">
        <el-input v-model="questionForm.remark" placeholder=""></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import { regionData } from 'element-china-area-data'
import { quillEditor } from 'vue-quill-editor'
import UploadFile from './upload-file.vue'
import QuestionType from './question-type.vue'
import { addQuestion, updateQuestion } from '@/api/question'
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
@Component({
  name: 'QuestionEdit',
  components: {
    quillEditor,
    UploadFile,
    QuestionType
  }
})
export default class QuestionEdit extends Vue {
  declare questionForm: any
  declare dialogFormVisible: boolean

  @Prop({ type: String, default: 'add' }) mode?: string
  @Prop({ type: Array, default: [] }) subjectList: any
  @Prop({ type: Array, default: [] }) enterpriseList: any
  @Prop({ type: Object, default: [] }) stepObj: any
  @Prop({ type: Object, default: [] }) typeObj: any
  @Prop({ type: Object, default: [] }) difficultyObj: any

  data() {
    return {
      dialogFormVisible: false, // 显示或是隐藏
      options: regionData, // 城市数据
      answerType: {
        // 回答类型
        1: 'single_select_answer',
        2: 'multiple_select_answer',
        3: 'short_answer'
      },
      questionForm: {
        subject: '', // 学科id标识
        step: '', // 阶段1、初级 2、中级 3、高级
        enterprise: '', // 企业id标识
        city: [], // 城市列表
        type: 1, // 题型 1单选 、2多选 、3简答
        difficulty: 1, // 题目难度 1简单 、2一般 、3困难
        title: '', // 试题标题
        single_select_answer: '', // 单选题答案
        multiple_select_answer: '', // 多选题答案
        short_answer: '', // 简答题答案
        video: '', // 解析视频地址
        answer_analyze: '', // 答案解析
        remark: '', // 答案备注
        select_options: [
          {
            label: 'A',
            text: '狗不理',
            image: ''
          },
          {
            label: 'B',
            text: '猫不理',
            image: ''
          },
          {
            label: 'C',
            text: '麻花',
            image: ''
          },
          {
            label: 'D',
            text: '炸酱面',
            image: ''
          }
        ]
      },
      rules: {
        subject: [
          { required: true, message: '学科不能为空', trigger: 'change' }
        ],
        step: [{ required: true, message: '阶段不能为空', trigger: 'change' }],
        enterprise: [
          { required: true, message: '企业不能为空', trigger: 'change' }
        ],
        city: [{ required: true, message: '城市不能为空', trigger: 'change' }],
        type: [{ required: true, message: '题型不能为空', trigger: 'change' }],
        difficulty: [
          { required: true, message: '难度不能为空', trigger: 'change' }
        ],
        title: [
          { required: true, message: '试题标题不能为空', trigger: 'change' }
        ],
        single_select_answer: [
          { required: true, message: '请选择单选答案', trigger: 'change' }
        ],
        multiple_select_answer: [
          { required: true, message: '请选择多选答案', trigger: 'change' }
        ],
        short_answer: [
          { required: true, message: '请输入简答答案', trigger: 'change' }
        ],
        answer_analyze: [
          { required: true, message: '答案解析不能为空', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '试题备注不能为空', trigger: 'change' }
        ]
      }
    }
  }
  @Watch('dialogFormVisible')
  dialogFormVisibleChange() {
    this.$nextTick(() => {
      ;(this.$refs.questionFormRef as any).clearValidate()
    })
  }
  editorChange(prop: string) {
    ;(this.$refs.questionFormRef as any).validateField(prop)
  }
  questonTypeChange() {
    ;(this.$refs.questionFormRef as any).validateField([
      'single_select_answer',
      'multiple_select_answer',
      'short_answer'
    ])
  }
  submit() {
    ;(this.$refs.questionFormRef as any).validate(async (valid: boolean) => {
      if (valid) {
        let res = null
        if (this.mode === 'add') {
          res = await addQuestion(this.questionForm)
        } else {
          // 修改的时候，需要把city数组改成字符串
          this.questionForm.city = this.questionForm.city.join(',')

          res = await updateQuestion(this.questionForm)
        }

        if (res.data.code === 200) {
          // 关闭弹框
          this.dialogFormVisible = false

          // 弹出提示
          this.$message.success(this.mode === 'add' ? '新增成功~' : '编辑成功~')

          // 调用父组件的search方法
          ;(this.$parent as any).search()
        }
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.questionEdit /deep/ {
  .title {
    color: #fff;
    padding-left: 15px;
    height: 54px;
    line-height: 54px;
    background-color: #04bcfa;
  }
  .el-dialog__header {
    padding: 0px;
  }
  .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
  }
  .form {
    width: 832px;
    margin: 0 auto;
  }
  .select {
    width: 300px;
  }
  .quillEditor {
    margin-bottom: 22px;
  }
  .quillEditor .el-form-item__content {
    margin-left: 0px !important;
    margin-top: 40px;
  }
  .hrMargin {
    margin-bottom: 22px;
  }
  .el-dialog__footer {
    text-align: center;
  }
}
</style>
